import React, { useEffect, useState } from "react";
import "./index.scss";
import { post_axios, vConsole } from "../../utils";
import { Spin } from "antd";
import Topnav from "./topnav";
import MenuTabs from "./menuTabs";

export default function Home() {
  const [spinning, setSpinning] = React.useState(false);
  // 菜单数组
  const [menu_data, setMenu_data] = useState([]);
  // tab标签选中
  const [tab_idx, setTab_idx] = useState();
  // tab标签数组
  const [tab_array, setTab_array] = useState([]);
  // 用户权限
  const [user_power, setUser_power] = useState({});
  // 用户权限中英文
  const [user_power_lang, setUser_power_lang] = useState({});
  // 账户信息
  const [user_msg, setUser_msg] = useState({});
  // 菜单是否展示
  const [menuFinish, setMenuFinish] = useState(false);
  // 获取菜单
  const get_menu = async () => {
    setSpinning(true);
    let upMsg = {
      op_type: "menu",
    };
    let res = await post_axios("login_get_menu", "menu", upMsg);

    setSpinning(false);
    if (!res) return;
    let menu_arr = res.data.menu;

    setMenu_data(menu_arr);
    setUser_power(res.data.menu_action);
    setUser_power_lang(res.data.action_msg);
    setUser_msg(res.data);
    let choose_company = JSON.parse(localStorage.getItem("choose_company"));
    vConsole(["用户名:" + res.data.username + ",grade:" + res.data.role_grade]);
    setMenuFinish(true);

    if (
      (res.data.role_grade < 10 && !choose_company) ||
      (res.data.role_grade < 10 &&
        choose_company &&
        !choose_company[res.data.username])
    ) {
      //role_grade < 10为管理员账号，并且本地存储的账号-公司对象中不存在已选择公司，则需要选择公司
      let obj_item = menu_arr
        .find((menu) => menu.msg_cn === "平台管理")
        .children.find((child) => child.msg_cn === "公司管理");
      obj_item["closable"] = true;
      setTab_array([...tab_array, obj_item]);
      router_go_func("company_manager");
      return;
    } else if (res.data.role_grade > 10) {
      localStorage.setItem(
        "choose_company",
        JSON.stringify({
          [res.data.username]: {
            company: res.data.company,
            id: res.data.company_id,
          },
        })
      );
    }
    let home_menu = menu_arr
      .find((menu) => menu.msg_cn === "总览")
      ?.children.find((child) => child.msg_cn === "首页");
    if (home_menu) {
      home_menu["closable"] = true;
      setTab_array([...tab_array, home_menu]);
      router_go_func(home_menu.method);
    }
  };
  // 菜单单击事件
  const menu_select = async (item) => {
    console.log(item);
    // 所选菜单对象
    let click_item = item;
    // 已选菜单的tab数组
    let tab_arr_has = [...tab_array];
    // 检测tab数组是否含有点击的菜单
    let click_idx_inTab = tab_arr_has.find(
      (item) => item.method === click_item.method
    );
    if (!click_idx_inTab) {
      // click_idx_inTab存在即代表已经有了此tab标签，重新选中即可
      // 不存在就将菜单对象添加进数组并选中
      item["closable"] = true;
      setTab_array([...tab_array, item]);
    }

    router_go_func(item.method);
  };

  // tab标签删除
  const tab_remove = (name) => {
    let tab_arr_has = [...tab_array];

    //tab删减之后的数组
    let tab_arr_removed = tab_arr_has.filter((item) => item.method !== name);
    setTab_array(tab_arr_removed);
    if (tab_arr_removed.length < 1) return;
    router_go_func(tab_arr_removed[tab_arr_removed.length - 1].method);
  };
  // 路由跳转
  const router_go_func = (name) => {
    setTab_idx(name);
    vConsole([{ ...user_power[name] }, { ...user_power_lang }]);
  };
  useEffect(() => {
    // 挂载后或者更新后的操作
    get_menu();
  }, []);
  return (
    <div className="index">
      {menuFinish ? (
        <Topnav
          menu_select={menu_select}
          menu_data={menu_data}
          user_msg={user_msg}
        />
      ) : (
        <div></div>
      )}

      <MenuTabs
        tab_idx={tab_idx}
        tab_array={tab_array}
        tab_remove={tab_remove}
        router_go_func={router_go_func}
        user_power={user_power}
        user_power_lang={user_power_lang}
        user_msg={user_msg}
      />

      <Spin spinning={spinning} fullscreen />
    </div>
  );
}
